// 自定义时间轴组件（简化版，需结合Cesium Viewer使用）
import * as Cesium from 'cesium'

export class SimpleTimeline {
  constructor(viewer, onTimeChange) {
    this.viewer = viewer
    this.onTimeChange = onTimeChange
    this.init()
  }
  init() {
    // 创建简单的时间轴DOM
    this.container = document.createElement('div')
    this.container.className = 'simple-timeline'
    this.container.style =
      'position:absolute;bottom:20px;left:50%;transform:translateX(-50%);width:600px;height:40px;background:rgba(34,44,60,0.8);border-radius:8px;display:flex;align-items:center;z-index:1000;'
    document.body.appendChild(this.container)
    // 创建滑块
    this.slider = document.createElement('input')
    this.slider.type = 'range'
    this.slider.min = 0
    this.slider.max = 100
    this.slider.value = 0
    this.slider.style = 'width:90%;margin:0 5%;'
    this.container.appendChild(this.slider)
    // 监听滑块变化
    this.slider.addEventListener('input', (e) => {
      const percent = e.target.value / 100
      const start = Cesium.JulianDate.toDate(
        this.viewer.clock.startTime
      ).getTime()
      const end = Cesium.JulianDate.toDate(this.viewer.clock.stopTime).getTime()
      const cur = start + (end - start) * percent
      const newTime = Cesium.JulianDate.fromDate(new Date(cur))
      this.viewer.clock.currentTime = newTime
      this.viewer.clock.shouldAnimate = false
      this.onTimeChange && this.onTimeChange(newTime)
    })
  }
  setValueByTime(julianTime) {
    const start = Cesium.JulianDate.toDate(
      this.viewer.clock.startTime
    ).getTime()
    const end = Cesium.JulianDate.toDate(this.viewer.clock.stopTime).getTime()
    const cur = Cesium.JulianDate.toDate(julianTime).getTime()
    const percent = ((cur - start) / (end - start)) * 100
    this.slider.value = percent
  }
  destroy() {
    this.container && this.container.remove()
  }
}
